<template>
  <div class="screen-share">
    <video 
      ref="videoElement" 
      autoplay 
      playsinline 
      referrerpolicy="no-referrer"
    ></video>
    <div class="screen-share-controls">
      <button class="control-btn" @click="toggleShare">
        <i :class="['fas', isSharing ? 'fa-stop-circle' : 'fa-play-circle']"></i>
        {{ isSharing ? '停止共享' : '开始共享' }}
      </button>
      <div class="share-info">
        <span v-if="shareTitle">{{ shareTitle }}</span>
        <span v-if="shareSize">分辨率: {{ shareSize }}</span>
      </div>
    </div>
    <div class="stream-status">
      <i :class="['fas', statusIcon]"></i>
      <span>{{ statusText }}</span>
    </div>
  </div>
</template>

<script>
import { ref, watch, onUnmounted } from 'vue';

export default {
  props: {
    stream: {
      type: MediaStream,
      default: null
    }
  },
  
  setup(props) {
    const videoElement = ref(null);
    const statusIcon = ref('fa-desktop');
    const statusText = ref('未连接');
    const isSharing = ref(false);
    const shareTitle = ref('');
    const shareSize = ref('');
    
    // 监听流变化
    watch(() => props.stream, (newStream) => {
      if (newStream) {
        // 设置视频元素
        if (videoElement.value) {
          videoElement.value.srcObject = newStream;
          videoElement.value.play().catch(e => console.log('自动播放限制:', e));
        }
        
        // 更新状态
        isSharing.value = true;
        statusIcon.value = 'fa-desktop';
        statusText.value = '屏幕共享中';
        
        // 获取共享信息
        if (newStream.getVideoTracks().length > 0) {
          const track = newStream.getVideoTracks()[0];
          const settings = track.getSettings();
          
          // 获取窗口/屏幕标题
          if (track.label.includes('Screen')) {
            shareTitle.value = '整个屏幕';
          } else {
            shareTitle.value = track.label.replace('Window: ', '');
          }
          
          // 显示分辨率
          if (settings.width && settings.height) {
            shareSize.value = `${settings.width}×${settings.height}`;
          }
        }
      } else {
        // 清理资源
        if (videoElement.value) {
          videoElement.value.srcObject = null;
        }
        
        // 更新状态
        isSharing.value = false;
        statusIcon.value = 'fa-desktop';
        statusText.value = '屏幕共享已停止';
        shareTitle.value = '';
        shareSize.value = '';
      }
    }, { immediate: true });
    
    // 切换共享状态
    const toggleShare = () => {
      isSharing.value = !isSharing.value;
      if (!isSharing.value) {
        // 停止共享逻辑应由父组件处理
        statusText.value = '已停止共享';
      } else {
        statusText.value = '正在重新连接...';
      }
    };
    
    // 清理资源
    onUnmounted(() => {
      if (videoElement.value) {
        videoElement.value.srcObject = null;
      }
    });
    
    return {
      videoElement,
      isSharing,
      shareTitle,
      shareSize,
      statusIcon,
      statusText,
      toggleShare
    };
  }
};
</script>

<style scoped>
.screen-share {
  position: relative;
  height: 150px;
  background: #0d1117;
  border-radius: 8px;
  overflow: hidden;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.screen-share-controls {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-btn {
  padding: 5px 10px;
  border-radius: 4px;
  border: none;
  background: #3498db;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
}

.control-btn:hover {
  background: #2980b9;
}

.share-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #a0aec0;
  font-size: 0.7rem;
}

.stream-status {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #a0aec0;
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .screen-share {
    height: 120px;
  }
  
  .screen-share-controls {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>